<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">XXX 服装厂</div>
      <div class="sub_title">服装收益图</div>
    </div>
    <div id="point_basic" style="width: 100%"></div>
    <el-radio-group v-model="curRadioValue" @change="changeType">
      <el-radio
        style="margin: 12px"
        border
        size="medium"
        :label="radio.value"
        v-for="radio in radioList"
        :key="radio.value"
        >{{ radio.name }}</el-radio
      >
    </el-radio-group>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import mock from "./mock";
const colorMap = {
  衣服: "#1890FF",
  裤子: "#2FC25B",
};
export default {
  data() {
    return {
      chart: null,
      curRadioValue: "unitPrice*profit*nums",
      radioList: [
        {
          name: "单价*总收益*销售量",
          value: "unitPrice*profit*nums",
        },
        {
          name: "单价*总收益*造价",
          value: "unitPrice*profit*expend",
        },
        {
          name: "造价*总收益*单价",
          value: "expend*profit*unitPrice",
        },
        {
          name: "造价*总收益*销售量",
          value: "expend*profit*nums",
        },
        {
          name: "销售量*总收益*单价",
          value: "nums*profit*unitPrice",
        },
        {
          name: "销售量*总收益*造价",
          value: "nums*profit*expend",
        },
        {
          name: "单价*销售量*总收益",
          value: "unitPrice*nums*profit",
        },
        {
          name: "造价*销售量*总收益",
          value: "expend*nums*profit",
        },
      ],
      dataList: mock.bubble,
    };
  },
  mounted() {
    this.chart = new Chart({
      container: "point_basic",
      autoFit: true,
      height: 550,
      padding: [40, 80, 80, 80],
    });
    this.chart.data(this.dataList);
    // 设置度量,数据没有被映射就不会绘制在画布中,这为了能动态切换,给每个数据源都设置了度量
    this.chart.scale({
      type: {
        alias: "类别",
      },
      name: {
        alias: "名称",
      },
      unitPrice: {
        alias: "单价",
        range: [0.1, 0.9],
        formatter: (val) => {
          return "￥" + val;
        },
      },
      expend: {
        alias: "造价",
        range: [0.1, 0.9],
        formatter: (val) => {
          return "￥" + val;
        },
      },
      profit: {
        alias: "总收益",
        // nice:true
        range: [0.1, 0.9],
        formatter: (val) => {
          return "￥" + val;
        },
      },
      nums: {
        alias: "销售量",
        // nice:true
        range: [0.1, 0.9],
        formatter: (val) => {
          return val + "(个)";
        },
      },
    });
    // 这里给 unitPrice/expend/nums/profit 设置坐标轴,同样的不被映射就不会被绘制
    this.chart.axis("unitPrice", {
      title: {
        style: {
          fontSize: 16,
          textAlign: "center",
        },
        offset: 40,
      },
    });
    this.chart.axis("expend", {
      title: {
        style: {
          fontSize: 16,
          textAlign: "center",
        },
        offset: 40,
      },
    });
    this.chart.axis("nums", {
      title: {
        style: {
          fontSize: 16,
          textAlign: "center",
        },
        offset: 40,
      },
    });
    this.chart.axis("profit", {
      title: {
        style: {
          fontSize: 16,
          textAlign: "center",
        },
        offset: 60,
      },
    });
    // 设置提示
    this.chart.tooltip({
      showMarkers: false,
      showTitle: false,
      // 给对应 class 的 dom 添加样式
      domStyles: {
        "g2-tooltip-list-item": {
          textAlign: "left",
        },
      },
    });
    // 不显示图例
    this.chart.legend(false);
    // 添加交互
    this.chart.interaction("element-active");
    // 映射图形并渲染
    this.positionChart(this.curRadioValue);
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      this.chart.changeData(newValue);
    },
  },
  methods: {
    // 切换类型
    changeType(value) {
      this.positionChart(value);
    },
    // 根据不同类型渲染图表
    positionChart(typeStr) {
      const typeList = typeStr.split("*");
      // 清楚 charts 内容
      this.chart.clear();
      // 映射数据
      this.chart
        .point()
        // unitPrice*profit
        .position(`${typeList[0]}*${typeList[1]}`)
        // nums
        .size(typeList[2], [12, 54])
        .shape("circle")
        .color("type", (val) => {
          return colorMap[val];
        })
        .tooltip("type*name*unitPrice*expend*profit*nums")
        // 控制label的显示 这里"name*type" 为参数, 第一项默认作为展示的 label 内容 
        .label("name*type", (name,type) => {
          return {
            // 通过content自定义内容
            // content:name,
            offset: 0, // 文本距离图形的距离
            style: {
              fill: colorMap[type],
              stroke: "#fff",
              lineWidth: 1,
              fontSize:10
            },
          };
        })
        // 设置几何图形 这里的 "type" 为参数
        .style("type", (val) => {
          return {
            lineWidth: 1,
            strokeOpacity: 1,
            fillOpacity: 0.3,
            opacity: 0.65,
            stroke: colorMap[val],
          };
        });
      this.chart.render();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>